/*
* 分页表格
* 新增属性:
* page 查询接口  function
* extraParmas 除分页之外的其他查询参数 Object
*/
import React from 'react';
import {Table,LocaleProvider} from 'antd';
import zh_CN from 'antd/lib/locale-provider/zh_CN';//国际化

export default class TablePage extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            pagination:{
                pageSizeOptions:['20','50'],
                showQuickJumper:{goButton: true},
                showSizeChanger:true,
                //defaultPageSize:20,
                /*showTotal:(total, range) => `当前${range[0]}-${range[1]},共 ${total}条数据`*/
                //itemRender:(page,type,originalElement) => {}
            }
        };
    }

    render(){
        return (
            <div>
                <LocaleProvider locale={zh_CN}>
                    <Table {...this.props}
                           style={{paddingTop:10}}
                           rowKey={record => record.id}
                           pagination={{...this.props.pagination,...this.state.pagination}}
                    />
                </LocaleProvider>
                <style>
                    {`.ant-pagination-options-quick-jumper button{
                        border-radius: 4px;
                        background-color: rgba(24, 144, 255, 1);
                        color: white;
                        line-height:normal !important;
                        padding:4px 8px;
                        margin-left:8px;
                        display: inline-block;
                        border:none;
                        cursor:pointer;
                        outline:none;
                        }
                        .ant-pagination-options-quick-jumper button:hover{
                        color: #fff;
                        background-color: #40a9ff;
                        border-color: #40a9ff;
                        }`
                    }
                </style>
            </div>
        );
    }
}